<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <link href="./css/bootstrap5.3.min.css" rel="stylesheet">
</head>
<body>
    <h1>hello world</h1>

    <button id=btn >点击</button>

    <!-- <div id=mess1 class="mymess" >
        消息希纳斯
    </div> -->

    <style>
        .mymess{
            left: 100px;
            top: 50px;
            position: fixed;
            border: 1px solid #e9c5c5;
            border-radius: 5px;
            text-align: center;
            padding: 10px;
            width: 350px;
            font-size: large;
            color: aliceblue;
            background-color: #000000;
            opacity: 1;
        }
    </style>
</body>
<script>
    function showmess(mess){
        let div = $("<div class=mymess>"+mess+"</div>");
        $("body").append(div);
        
        let intv = setInterval(()=>{
            let top = div.css("top");
            top = parseInt( top.split("px")[0]  );
            if( top > 500){
                div.remove();
                clearInterval(intv);
            }
            div.css("top", (top+5)+"px"  );
            div.css("opacity",  1-(top/(800.0))  );
        } ,17);
    }
    $("#btn").click((e)=>{
        showmess("撒旦撒旦阿三顶顶顶啊啊啊啊啊啊啊啊啊啊实打实");
    });
</script>
</html>